<template>
  <div class="hs-ed">
    <div class="hs-ed-wrap" id="gender-root">
      <div class="hs-ed-wrap-title">- 员工性别分布 -</div>
      <div class="hs-ed-wrap-info">
        <div class="hs-ed-wrap-info-block">
          <img :src="male" alt="male" />
          <p class="hs-ed-wrap-info-block-male">男</p>
          <p class="hs-ed-wrap-info-block-male">
            {{ this.$store.state.statistical.emGenderDis.male }}%
          </p>
        </div>
        <div class="hs-ed-wrap-info-block">
          <img :src="female" alt="female" />
          <p class="hs-ed-wrap-info-block-female">女</p>
          <p class="hs-ed-wrap-info-block-female">
            {{ this.$store.state.statistical.emGenderDis.female }}%
          </p>
        </div>
        <div class="hs-ed-wrap-info-individual">vs</div>
      </div>
      <div class="hs-ed-wrap-table">
        <el-progress
          :percentage="this.$store.state.statistical.emGenderDis.male"
          :stroke-width="110"
        ></el-progress>
        <table border="1" cellspacing="0" cellpadding="0" class="ed-table">
          <tr v-for="(tr, index) in trList" :key="index">
            <td v-for="(td, index) in tdList" :key="index"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
//员工性别分布
import male from "../../../assets/image/male.png";
import female from "../../../assets/image/female.png";

export default {
  data() {
    return {
      male: male,
      female: female,
      trList: [1, 1, 1, 1],
      tdList: [
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        1,
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("gender-root");
    });
    this.$store.watch(
      (state, getter) => {
        return state.emGenderDis;
      },
      () => {
        // console.log("enter");
      }
    );
  },
  methods: {
    drawbar(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
    },
  },
};
</script>

<style>
.hs-ed {
  /* border: 1px solid red; */
  width: 100%;
  height: 100%;
}
.hs-ed-wrap {
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
}
.hs-ed-wrap-title {
  /* border: 1px solid red; */
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: #cbe9f4;
}
.hs-ed-wrap-info {
  /* border: 1px solid yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 18px;
}
.hs-ed-wrap-info-individual {
  position: absolute;
  font-size: 26px;
  font-weight: bolder;
  color: #48e3eb;
}
.hs-ed-wrap-info-block {
  flex: 1;
  text-align: center;
}
.hs-ed-wrap-info-block-male {
  color: #107ef4;
  font-size: 16px;
  font-weight: bolder;
}
.hs-ed-wrap-info-block-female {
  color: #ec808d;
  font-size: 16px;
  font-weight: bolder;
}
.hs-ed-wrap-info-block img {
  width: 4rem;
}
.el-progress-bar {
  padding: 0 !important;
  margin: 0 !important;
}
.el-progress-bar__outer {
  background-color: #ec808d !important;
  border-radius: 0 !important;
}
.el-progress-bar__inner {
  background-color: #107ef4 !important;
  border-radius: 0 !important;
}
.el-progress__text {
  display: none !important;
}
.hs-ed-wrap-table {
  position: relative;
  height: 110px;
  /* min-width: 332px; */
  margin: 14px 4px 4px 4px;
  /* 上面的el-progress要调整成一样的高度 */
}
.ed-table {
  border: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.ed-table tr td {
  width: 4%;
  border: 1px solid #000;
}
</style>